#divDatetimePicker {
  border: solid 1px silver;
  padding: 3px; //    position: absolute;
//    margin: 10px; //    font-family: Simsun, Arial, Verdana, sans-serif;
  font-size: 9pt;
}

.calendar {

  border: solid 1px silver;
  border-collapse: collapse;
  empty-cells: show; //    th {
//        border: solid 1px black;
//    }
  thead tr {
    background-color: #c0ebef;

    th {
      font-weight: normal;
      padding: 3px;

      &.zh {
        padding-left: 6px;
        padding-right: 6px;
      }
    }
  }

  th, td {
    padding: 3px 5px 3px 5px;
  }

  td.sibling_month {
    color: gray;
  }

  td.this_month.weekend {
    color: red;
  }

  td {
    cursor: pointer;
    text-align: center;
  }

  td:hover {
    background-color: #c0ebef;
  }

  td.selected {
    background-color: #a9e4e9;
  }
}

.datetimePicker {

  * {
    font-family: Simsun
  }

  .txtYear, .txtMonth {
    cursor: pointer;
    text-align: center;
    border: solid 1px transparent;
  }

  .editor {
    border-color: gray;
    cursor: text;
    color: blue;
    font-weight: bold;
  }

  .txtMonth {
    width: 30px;
  }

  .txtYear {
    width: 35px;
    margin-right: 5px;
  }

  input {
    outline: none;
  }

//    .month_input {
//        border: solid 1px gray;
//    }
//
  div.buttons {
    margin-top: 2px;
    text-align: right;
    overflow: auto;

    input {
      height: 20px;
      width: 45px;
      border: #CCC 1px solid;
      float: right;
      margin-left: 1px;
      font-size: 9pt;
    }

  }

}

div.selectGridContainer {

  background-color: window;
  position: absolute;
  z-index: 999;
  border: solid 1px gray; //    font-family: Simsun, Arial, Verdana, sans-serif;
}

table.selectGrid {
  border-collapse: collapse;

  td {
    cursor: pointer;
    font-family: Simsun;
    font-size: 9pt;
    text-align: center;
    padding: 3px 3px 3px 3px;
  }

  td:hover {
    background-color: #c0ebef;
  }

  td.disabled {
    color: #aaa;
    cursor: text;
    background-color: inherit;
  }

}

//

.selectGridContainer {
  .yearPager {
    font-family: simsun;
    font-size: 9pt;
    a {
      text-decoration: none;
      color: WindowText;
    }

    table {
      width: 100%;
      border: solid 6px transparent;
      border-top-width: 2px;
      border-bottom-width: 2px;
      border-collapse: collapse;
      td {
        width: 33.3%;
        text-align: center;
        &:hover {
          background-color: #c0ebef;
        }
      }

      td.disabled {
        a {
          color: #ccc;
          cursor: text;
        }
        &:hover {
          background-color: inherit;
        }
      }
    }

  }
}

//
.datetimePicker a.pager {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../../image/undecorated/pager.png') no-repeat;
  color: transparent;
  vertical-align: 2px;
}

.datetimePicker a.prevMonth {
  background-position: -16px top;
}

.datetimePicker a.nextMonth {
  background-position: -32px top;
}

.datetimePicker a.nextYear {
  background-position: -48px top;
}
